<template>
  <div class="message_item">
    <p class="cont">{{ data.cont }}</p>

    <p class="name">{{ data.name }}</p>

    <p class="info">
      <el-tag :type="TYPE_MAP[data.type]">{{ TYPE_TEXT[data.type] }}</el-tag>

      <span>{{ data.time }}</span>
    </p>
  </div>
</template>

<script setup>
import { TYPE_MAP, TYPE_TEXT } from '@/const';

const props = defineProps({
  data: {
    type: Object,
    default: () => {},
  },
});
</script>

<style scoped>
.message_item {
  position: relative;
  text-align: center;
  padding: 1rem; 
}

.message_item::after {
  content: '';
  display: block;
  height: 0.05rem;
  background: var(--borderColor);
  position: absolute;
  bottom: 0;
  left: calc(50% - 1rem);
  width: 4rem;
}

.cont {
  font-size: 1.25rem;
  font-weight: bold;
  color: var(--textColor);
  line-height: 2.5rem; 
}

.cont:hover {
  text-shadow: 0.0625rem 0.0625rem 0.125rem #999; 
}

.info {
  font-size: 0.875rem; 
  color: var(--infoColor);
}

.info span {
  margin-right: 1.875rem; 
}

p.name {
  text-align: center;
  line-height: 2.5rem; 
  font-size: 1rem;
  color: var(--infoColor);
}

span:last-child {
  margin-right: 0;
}

@media (max-width: 768px) {
  .cont, .info, p.name {
    font-size: 1rem; 
  }

  .message_item::after {
    width: 3rem; 
  }

  .info span {
    margin-right: 1rem; 
  }
}
</style>
